<template>
  <el-scrollbar class="bg-scrollbar" >
    <div class="Logistics_Max">
      <div class="Logistics_Top">
        <div class="Logistics_Left">
          <div class="Logistics_Svg">
            <svg t="1667728813346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1892" width="32" height="32"><path d="M640 725.333333v-128h128v128h85.333333v128h-128v-128h-42.666666v128h-128v-128h85.333333z m213.333333-128h-85.333333v-51.2l-256-256-256 256V768h256v85.333333H170.666667v-298.666666H128l384-384 384 384h-42.666667v42.666666z" fill="#1296db" p-id="1893"></path></svg>
          </div>
          <div class="Logistics_Name"> 仓库物品：</div>
        </div>

      </div>
      <div class="Logistics_Table">
        <div class="Logistics_Right" style="display:flex;align-items: center">
          <span class="Logistics_Dept">
            <div>物品类别：</div>
            <el-select style="width: 170px;" :value="d.Sort" v-model="entrepot.entrepotCodeId">
              <el-option style="text-align: center" v-for="i in d.Sort"
                         :key="i.codenNo"
                         :label="i.codenName"
                         :value="i.codenNo"/>
            </el-select>
            <span class="Logistics_Input">
              <el-input type="text" v-model="entrepot.entrepotName" placeholder="请输入物品名称"/>
            </span>
            <el-button type="primary" @click="TemplateTroll()">搜索</el-button>
            <el-button type="primary" plain @click="reset()">重置</el-button>
          </span>
          <span style="display: flex;width: 40%;justify-content: flex-end;">
            <div class="inventory">
              <div class="Min">缺少</div>
<!--              <div class="Newest">当前库存</div>-->
              <div class="Max">溢出</div>
            </div>
            <div style="display: flex;">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item class="Import_Export">导出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </span>
        </div>
        <el-table :data="d.tableData" stripe :header-cell-style="{background:'#f5f7fa'}"  height="535"  style="width: 100%">
          <el-table-column align='center' prop="entrepotNo" label="产品编号" />
          <el-table-column align='center' prop="entrepotName" label="产品名称" />
          <el-table-column align='center' prop="coden.codenName" label="产品分类" />
          <el-table-column align='center' prop="entrepotSum" label="产品金额" />
          <el-table-column align='center' prop="entrepotMinAmount" label="库存最低" />
          <el-table-column align='center' label="当前库存">
            <template #default="s">
              <div class="StockMin" v-if="s.row.entrepotNewestAmount < s.row.entrepotMinAmount">
                {{s.row.entrepotNewestAmount}}
              </div>
              <div class="StockMax" v-if="s.row.entrepotNewestAmount > s.row.entrepotMaxAmount">
                {{s.row.entrepotNewestAmount}}
              </div>
              <div v-if="(s.row.entrepotNewestAmount >= s.row.entrepotMinAmount) && (s.row.entrepotNewestAmount <= s.row.entrepotMaxAmount)">
                {{s.row.entrepotNewestAmount}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center' prop="entrepotMaxAmount" label="库存最高" />
          <el-table-column align='center' label="操作" >
            <template #default="s">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <el-button type="primary" plain @click="breakageBoxDialog(s.row)"> 报损 </el-button>
                  <el-button type="primary" plain @click="OverflowEmitsDialog(s.row)"> 报溢 </el-button>
                  <el-button type="primary" plain @click="LookDialog(s.row)"> 盘点 查看 </el-button>
                </template>
                <template #reference>
                  <el-tag>...</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
            v-model="d.breakageDialog"
            width="46%"
            align-center
            title = "报损"
            :before-close="handleClose">
          <el-form label-width="110px" style="display: flex;flex-wrap: wrap;">
            <el-form-item label="产品编号：" style="width:296px">
              {{entrepotBreakage.entrepotNo}}
            </el-form-item>
            <el-form-item label="物品名称：" style="width:296px">
              {{entrepotBreakage.entrepotName}}
            </el-form-item>
            <el-form-item label="报损数量：" style="width:296px">
              <el-input-number type="number" v-model="entrepotBreakage.lossEntrepotAmount"  :min="1" :step="1" :max="entrepotBreakage.entrepotNewestAmount" @change="handleChange"></el-input-number>
            </el-form-item>
            <el-form-item label="库存数量：" style="width:296px">
              {{entrepotBreakage.entrepotNewestAmount}}
            </el-form-item>
<!--            <el-form-item label="库存数量：" style="width:296px">-->
<!--              {{entrepotBreakage.entrepotNewestAmount}}-->
<!--            </el-form-item>-->
            <el-form-item style="width:100%;" >
              <el-button @click="resetForm()">取消</el-button>
              <el-button type="primary" @click="submit(1)">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
            v-model="d.OverflowDialog"
            width="46%"
            align-center
            title = "报溢"
            :before-close="handleClose">
          <el-form label-width="110px" style="display: flex;flex-wrap: wrap;">
            <el-form-item label="产品编号：" style="width:296px">
              {{entrepotBreakage.entrepotNo}}
            </el-form-item>
            <el-form-item label="物品名称：" style="width:296px">
              {{entrepotBreakage.entrepotName}}
            </el-form-item>
            <el-form-item label="报溢数量：" style="width:296px">
              <el-input-number type="number" v-model="entrepotBreakage.lossEntrepotAmount"  :min="1" :step="1" :max="entrepotBreakage.entrepotNewestAmount" @change="handleChange"></el-input-number>
            </el-form-item>
            <el-form-item label="库存数量：" style="width:296px">
              {{entrepotBreakage.entrepotNewestAmount}}
            </el-form-item>
<!--            <el-form-item label="库存数量：" style="width:296px">-->
<!--              {{entrepotBreakage.entrepotNewestAmount}}-->
<!--            </el-form-item>-->
            <el-form-item style="width:100%;" >
              <el-button @click="resetForm()">取消</el-button>
              <el-button type="primary" @click="submit(2)">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
            v-model="d.LookUpDialog"
            title="后勤盘点"
            width="45%"
            :before-close="handleClose" center align-center>
          <div class="dialogDiv" >
            <div class="dialogDivDiv"><span>盘&nbsp&nbsp点&nbsp人：</span><div>{{InventoryFrom.noetManName}}</div></div>
            <div class="Checker">
              <div class="dialogDivDiv"><span>物品编号：</span><div>{{InventoryFrom.noetNo}}</div></div>
              <div class="dialogDivDiv"><span>物品名称：</span><div>{{InventoryFrom.noetName}}</div></div>
              <div class="dialogDivDiv"><span>物品数量：</span>
                <div>
                  <el-input-number v-model="InventoryFrom.noetModifyDot" :step="1"/>
                </div>
              </div>
              <div class="dialogDivDiv"><span>物品金额：</span>
                <div>
                  <el-input-number v-model="InventoryFrom.noetModifySum" :precision="2" :step="0.1"/>
                </div>
              </div>
              <div class="dialogDivDiv dialogDivRemarks"><span>备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注：</span><div>
                <el-input
                    maxlength="200"
                    show-word-limit
                    :rows="4" type="textarea"
                    placeholder="请简单的描述一下问题"
                    v-model="InventoryFrom.noetRemark"
                    style="width: 570px"
                    autocomplete="off"/></div></div>
            </div>
          </div>
          <div style="display: flex;justify-content: center;">
            <el-button @click="resetForm()">取消</el-button>
            <el-button @click="submit(3)" type="primary">确定</el-button>
          </div>


        </el-dialog>
      </div>
      <div class="Logistics_Paging">
        <el-pagination
            v-model:currentPage="d.pageNo"
            v-model:page-size="d.pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="d.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>

import {onBeforeMount, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import moment from "moment";

const store = useStore()

const date = new Date();

let str =ref(moment(date).format('yyyy-MM-DD HH:mm:ss'))

const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //数据
  tableData:[],
  //查询的部门
  Dept:[],
  //查询的职位
  Position:[],
  //查询的类别
  Sort:[],
  //报损的对话框
  breakageDialog:false,
  //报溢
  OverflowDialog:false,
  //盘点
  LookUpDialog:false,
});

const handleClose = () => {
  d.breakageDialog = false ;
  d.OverflowDialog = false ;
  d.LookUpDialog = false ;
  reset()
}

const AllTableData=ref([])

const getTableData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(AllTableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTableData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTableData ();
}


//重置
const reset = () =>{
  coden.codenNo = undefined
  coden.codenName = undefined

  entrepot.entrepotId = undefined
  entrepot.entrepotNo = undefined
  entrepot.entrepotName = undefined
  entrepot.entrepotOldTime = undefined
  entrepot.entrepotNewTime = undefined
  entrepot.entrepotMinAmount = undefined
  entrepot.entrepotNewestAmount = undefined
  entrepot.entrepotMaxAmount = undefined
  entrepot.entrepotSum = undefined
  entrepot.entrepotCodeId = undefined

  //仓库
  entrepotBreakage.entrepotId = undefined
  entrepotBreakage.entrepotNo = undefined
  entrepotBreakage.entrepotName = undefined
  entrepotBreakage.entrepotOldTime = undefined
  entrepotBreakage.entrepotNewTime = undefined
  entrepotBreakage.entrepotMinAmount = undefined
  entrepotBreakage.entrepotNewestAmount = undefined
  entrepotBreakage.entrepotMaxAmount = undefined
  entrepotBreakage.entrepotSum = undefined
  entrepotBreakage.entrepotCodeId = undefined

  //默认复值
  Default.value = 1;

  InventoryFrom.noetNo = undefined;
  InventoryFrom.noetName = undefined;
  InventoryFrom.noetTime = undefined;
  InventoryFrom.noetCopyDot = undefined;
  InventoryFrom.noetModifyDot = undefined;
  InventoryFrom.noetCopySum = undefined;
  InventoryFrom.noetModifySum = undefined;
  InventoryFrom.noetManId = undefined;
  InventoryFrom.noetManName = undefined;
  InventoryFrom.noetRemark = undefined;

  GetData();
}
//复值
const ComplexValue = (val) => {
  //类别
  coden.codenName = val.codenName;
  coden.codenNo = val.codenNo;
  //仓库
  entrepot.entrepotId = val.entrepotId;
  entrepot.entrepotNo = val.entrepotNo;
  entrepot.entrepotName = val.entrepotName;
  entrepot.entrepotOldTime = val.entrepotOldTime;
  entrepot.entrepotNewTime = val.entrepotNewTime;
  entrepot.entrepotMinAmount = val.entrepotMinAmount;
  entrepot.entrepotNewestAmount = val.entrepotNewestAmount;
  entrepot.entrepotMaxAmount = val.entrepotMaxAmount;
  entrepot.entrepotSum = val.entrepotSum;
  entrepot.entrepotCodeId = val.entrepotCodeId;
}

//仓库盘点复值
const Inventory = (val) =>{
  InventoryFrom.noetNo = val.entrepotNo ;
  InventoryFrom.noetName = val.entrepotName;
  InventoryFrom.noetTime = date;
  InventoryFrom.noetCopyDot = val.entrepotNewestAmount;
  InventoryFrom.noetModifyDot = val.entrepotNewestAmount;
  InventoryFrom.noetCopySum = val.entrepotSum;
  InventoryFrom.noetModifySum = val.entrepotSum;
  InventoryFrom.noetManId = store.state.user.sysEmployee.empId;
  InventoryFrom.noetManName = store.state.user.sysEmployee.empName;
  InventoryFrom.noetRemark = val.publicRemark;
  InventoryFrom.noetIf = "CK" ;
}

//默认复值
const Default = ref(1)

//复值报损报溢
const  breakageComplexValue = (val,breakageSpill) =>{
  //仓库
  entrepotBreakage.entrepotId = val.entrepotId;
  entrepotBreakage.entrepotNo = val.entrepotNo;
  entrepotBreakage.entrepotName = val.entrepotName;
  entrepotBreakage.entrepotOldTime = val.entrepotOldTime;
  entrepotBreakage.entrepotNewTime = val.entrepotNewTime;
  entrepotBreakage.entrepotMinAmount = val.entrepotMinAmount;
  entrepotBreakage.entrepotNewestAmount = val.entrepotNewestAmount;
  entrepotBreakage.entrepotMaxAmount = val.entrepotMaxAmount;
  entrepotBreakage.entrepotSum = val.entrepotSum;
  entrepotBreakage.entrepotCodeId = val.entrepotCodeId;
  //报损数量
  entrepotBreakage.lossEntrepotAmount = Default;
  entrepotBreakage.lossName = store.state.user.sysEmployee.empName
  entrepotBreakage.lossSpill = breakageSpill.value

}

//类别
const coden = reactive({
  codenNo:undefined,
  codenName:undefined,
})
//仓库form表单
const entrepot = reactive({
  entrepotId:undefined,
  entrepotNo:undefined,
  entrepotName:undefined,
  entrepotOldTime:undefined,
  entrepotNewTime:undefined,
  entrepotMinAmount:undefined,
  entrepotNewestAmount:undefined,
  entrepotMaxAmount:undefined,
  entrepotSum:undefined,
  entrepotCodeId:undefined,
})
//报损报溢表单
const entrepotBreakage = reactive({
  entrepotId:undefined,
  entrepotNo:undefined,
  entrepotName:undefined,
  entrepotOldTime:undefined,
  entrepotNewTime:undefined,
  entrepotMinAmount:undefined,
  entrepotNewestAmount:undefined,
  entrepotMaxAmount:undefined,
  entrepotSum:undefined,
  entrepotCodeId:undefined,

  //报损数量
  lossEntrepotAmount:undefined,
  lossName:undefined,
  lossSpill:undefined,
})

//物品盘点 from 表单
const InventoryFrom = reactive({
  noetId:undefined,
  noetNo:undefined,
  noetName:undefined,
  noetTime:undefined,
  noetCopyDot:undefined,
  noetModifyDot:undefined,
  noetCopySum:undefined,
  noetModifySum:undefined,
  noetManId:undefined,
  noetManName:undefined,
  noetRemark:undefined,
  noetIf:undefined,
})

//取消
const resetForm = () =>{
  d.breakageDialog = false ;
  d.OverflowDialog = false ;
  d.LookUpDialog = false ;
  reset()
}
//确定
const submit = (val) =>{
  d.breakageDialog = false ;
  d.OverflowDialog = false ;
  d.LookUpDialog = false ;
  if(val == 1){
    breakage()
  }else if(val == 2){
    overflow()
  }else if(val == 3){
    lookup()
  }


}

const breakageSpill = ref("报损")
const Spill = ref("报溢")
const cycleSpill = ref("盘点")
//报损按钮
const breakageBoxDialog = (val) => {
  breakageComplexValue(val,breakageSpill);
  d.breakageDialog = true ;
}
//报溢按钮
const OverflowEmitsDialog = (val) =>{
  breakageComplexValue(val,Spill);
  d.OverflowDialog = true ;
}
//盘点按钮
const LookDialog = (val) =>{
  Inventory(val);
  d.LookUpDialog = true ;
}

//搜索按钮
const TemplateTroll = () =>{
  GetData()
}
//报损axios请求
const breakage = () =>{
  axios.post("/houqinOa/entrepot/Breakage",entrepotBreakage).then((res)=>{
    if(res.data.data){
      ElMessage({
        message:"报损成功!",
        type:'success'
      })
    }else{
      ElMessage({
        message:"报损失败!",
      })
    }
    GetData();
    reset();
  }).catch()
}
//报溢axios请求
const overflow = () => {
  axios.post("/houqinOa/entrepot/Overflow",entrepotBreakage).then((res)=>{
    if(res.data.data){
      ElMessage({
        message:"报溢成功!",
        type:'success'
      })
    }else{
      ElMessage({
        message:"报溢失败!",
      })
    }
    GetData();
    reset();
  }).catch()
}

//盘点axios请求
const lookup = () =>{
  axios.post("/houqinOa/noet/AddLookUp",InventoryFrom).then((res)=>{
    if(res.data.data){
      ElMessage({
        message:"盘点成功!",
        type:'success'
      })
    }else{
      ElMessage({
        message:"盘点失败!",
      })
    }
    GetData();
    reset();
  }).catch()
}

//查询全部类别
const classes = () =>{
  axios.post("/houqinOa/code/AllCode").then((res)=>{
    d.Sort =  res.data.data
  }).catch()
}
//查询仓库
const GetData = () =>{
  axios.post("/houqinOa/entrepot/AllEntrepot",entrepot).then((res)=>{
    // d.tableData = res.data.data;
    // console.log(d.tableData)
    var data =res.data.data;//存入查询出来的所有数据
    AllTableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTableData();//调用方法
  }).catch()
}

onBeforeMount(()=>{
  classes()
  GetData()
  // loss()
})

const loss1 = reactive({

})

const loss =() =>{
  axios.post("/houqinOa/Loss/LossAll",loss1).then((res)=>{
    console.log(res.data.data)
  })
}
</script>

<style scoped>
.dialogDivDiv{
  width: 50%;
  height: 50px;
  display: flex;
}
.dialogDivDiv Span {
  width: 70px;
  display: flex;
  align-items: center;
}
.dialogDivDiv div{

  display: flex;
  align-items: center;
}
.dialogDivRemarks{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 130px
}
</style>